<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
    <base href="http://localhost/resources/back/">
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" href="lib/zTree/v3/css/demo.css" type="text/css">
    <link rel="stylesheet" href="lib/zTree/v3/css/zTreeStyle/zTreeStyle.css" type="text/css">
    <script type="text/javascript" src="lib/jquery/1.9.1/jquery.js"></script>
    <script type="text/javascript" src="lib/zTree/v3/js/jquery.ztree.all-3.5.js"></script>
    <script type="text/javascript" src="js/AjaxUtils.js"></script>
    <script type="text/javascript" src="js/JsonUtils.js"></script>
    <script type="text/javascript" src="lib/layer/1.9.3/layer.js"></script>
    <script type="text/javascript" src="js/H-ui.js"></script>
    <script type="text/javascript" src="js/H-ui.admin.js"></script>
    <SCRIPT LANGUAGE="JavaScript">
        var zTreeObj;
        // zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
        var setting = {

            callback: {
                onRemove: zTreeOnRemove,
                onRename: zTreeOnRename,
                onDrop: zTreeOnDrop // 拖拽事件
            },
            view: {
                addHoverDom: addHoverDom,
                removeHoverDom: removeHoverDom,
            },
            edit: {
                enable: true,
                showRemoveBtn: true, //光标放到节点上 显示节点
                removeTitle: "删除节点",
                showRenameBtn: true,
                renameTitle: "编辑节点名称",
                drag: {
                    prev: true,
                    next: true,
                    inner: true
                }
            }
        };
        // zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）
        var zNodes = null;
        //页面初始化时调用
        $(document).ready(function(){
            //异步发送请求查询商品类别
            get("back/goodsType/getGoodsTypeTree",function (data) {
                console.info(data.data);
                //转化为一个标准的json
                zNodes=format(data.data);
                //初始化树节点
                zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
            });

        });
        //
        // function setRemoveTitle(treeId, treeNode) {
        //     return treeNode.isParent ? "删除父节点":"删除叶子节点";
        // };
        //删除节点后回调此函数
        function zTreeOnRemove(event, treeId, treeNode) {
            console.info( "remove" + treeNode.name);
            get("back/goodsType/deleteById/"+treeNode.id,function (data) {
                console.info(data);
            })
        };
        //更改节点后回调此函数
        function zTreeOnRename(event, treeId, treeNode, isCancel) {
            console.info( "rename" + treeNode.name);
            var param= new Object();
            param.id=treeNode.id;
            param.goodsTypeName=treeNode.name;
            send("back/goodsType/updateGoodsType",param,function (data) {
                console.info(data);
            });
        }
        function addHoverDom(treeId, treeNode) {
            //获取用户的dom元素
            var aObj = $("#" + treeNode.tId + "_a");
            if ($("#diyBtn_"+treeNode.id).length>0) return;
            //创建一个新的元素
            var editStr = "<span id='diyBtn_space_" +treeNode.id+ "' > </span>"
                + "<button type='button' class='diyBtn1' id='diyBtn_" + treeNode.id
                + "' title='"+treeNode.name+"' onfocus='this.blur();'>add</button>";
            //把这个元素放到用点击的节点的最后
            aObj.append(editStr);
            //按照用户新创建的按钮
            var btn = $("#diyBtn_"+treeNode.id);
            //给按钮绑定一个事件
            if (btn) btn.bind("click", function(){
                console.info("addNode" + treeNode.name);
                layer_show("添加商品类别","http://localhost/back/goodsType/addGoodsType.html?id="+treeNode.id,200,150);
            });
        };
        function removeHoverDom(treeId, treeNode) {
            $("#diyBtn_"+treeNode.id).unbind().remove();
            $("#diyBtn_space_" +treeNode.id).unbind().remove();
        };

        function zTreeOnDrop(event, treeId, treeNodes, targetNode, moveType) {
            console.info(treeNodes[0].name+",托到了:"+targetNode.name);

            // udpate set pid = targetNode.id where id =treeNodes[0].id
        };


    </SCRIPT>
</HEAD>

<body>
<div>
    <ul id="treeDemo" class="ztree"></ul>
</div>
</body>
</html>